<template>
    <div class="user">
        <header-nav></header-nav>
        <div class="container">
            <div class="right">
                <side-bar></side-bar>
                <side-bar-top></side-bar-top>
            </div>
            <div class="content">
                <div class="panel">
                    <div class="header">
                        <router-link :to="'/'">
                            <span class="icons fontS18 no-padding"><i class="fa fa-home"></i></span>
                        </router-link>
                        <!-- <span class="selfCenter">个人中心</span> -->
                    </div>
                    <div class="inner clear">
                        <div class="avatar">
                            <img :src="require('@/assets/images/avatar.jpg')" alt="">
                            {{userInfo.name}}
                        </div>
                        <div class="slef-info-list mt10">{{userInfo.score}} 积分</div>
                        <div class="slef-info-list">
                            <router-link :to="'/user/' + userInfo.name + '/collect'">{{userInfo.collect_topic_count}} 个话题收藏</router-link>
                        </div>
                        <div class="fontC3">
                            注册时间 {{days(userInfo.create_at)}}
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <div class="header">
                        <span>最近创建的话题</span>
                    </div>
                    <div class="inner no-padding">
                        <div class="cell" v-if="topics.length == 0">无话题</div>
                        <list-row-small :datas="topics"></list-row-small>
                        <router-link :to="'/user/' + userInfo.name + '/topics'"
                                     v-if="topics.length === 5"
                                     class="see-more">查看更多 <i class="fa fa-angle-double-right"></i></router-link>
                    </div>
                </div>
                <div class="panel">
                    <div class="header">
                        <span>最近参与的话题</span>
                    </div>
                    <div class="inner no-padding">
                        <div class="cell" v-if="replies.length == 0">无话题</div>
                        <list-row-small :datas="replies"></list-row-small>
                        <router-link :to="'/user/' + userInfo.name + '/reply'"
                                     v-if="replies.length === 5"
                                     class="see-more">查看更多  <i class="fa fa-angle-double-right"></i></router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    import HeaderNav from "@/components/header/header"
    import SideBar from "@/components/sidebar/sidebar"
    import SideBarTop from "@/components/sidebar/sidebartop"
    import ListRowSmall from "@/components/lists/listRowSmall"
    // import {mapState, mapActions} from 'vuex'
    import { topicByUser, getUserByName, getListReplies } from "@/service/api"
    import { getStore, relativeTime } from "@/config/mUtils"

    export default {
        data() {
            return {
                topics: [],
                userInfo: {
                    name: ''
                },
                replies: [],
            }
        },
        mounted(){
            this.getUser()
            this.topicsSelf()
            this.getListReplies()
        },
        computed: {

        },
        watch:{
            '$route': ['getUser', 'topicsSelf']
        },
        methods: {
            days(time) {
                return relativeTime(time)
            },
            async topicsSelf() {//获取当前用户的所有博客列表
                let params = {
                    author_name: this.$route.params.name
                }
                
                let res = await topicByUser(params)
                if(res.code) {
                    // console.log(res.result)
                    this.topics = res.result || []
                } else {
                    console.log(res)
                }
            },
            async getUser() {//获取用户的信息
                let params = {
                    loginName: this.$route.params.name
                }
                let res = await getUserByName(params)
                if(res.code) {
                    this.userInfo = res.result
                } else {
                    console.log(res)
                    this.$message.error(res.msg)
                }
            },
            //获取用户最近参与的话题
            async getListReplies() {
                let params = {
                    loginName: this.$route.params.name,
                }
                let res = await getListReplies(params)
                // console.log(res)
                if(res.code) {
                    this.replies = res.result;
                } else {
                    this.$message.error(res.msg)
                }
            }
        },
        components: {
            HeaderNav,
            SideBar,
            SideBarTop,
            ListRowSmall
        }
    }
</script>

<style lang="scss" scoped >
    @import '../../style/mixin';

    .user {
        .container {
            margin-top: 10px;
            .info-box {
                border: 1px solid $bold;
                background-color: $body;
                width: 300px;
                border-radius: 3px;
                overflow: hidden;
                header {
                    @include lh(30px);
                    background-color: $main;
                    color: $fff;
                    text-align: center;
                    font-size: 14px;
                }
            }
            .header {
                a {
                    color: $main;
                    font-size: 16px;
                }
                .selfCenter {
                    color: $main;
                }
            }
            .avatar {
                line-height: 40px;
                color: $main;
            }
            .slef-info-list {
                line-height: 34px;
                color: $fontC2;
                a {
                    color: $fontC2;
                    &:hover {
                        text-decoration: underline;
                        color: $main;
                    }
                }
            }
            .see-more {
                padding-left: 10px;
                color: $fontC3;
                text-align: center;
                line-height: 30px;
                display: block;
                &:hover {
                    color: $main;
                    text-decoration: underline;
                }
            }
        }
    }
    
</style>

